<template>
    <div class="android">
        <div class="Breadcrumb">
            <Breadcrumb :breadList='position'></Breadcrumb>
        </div>
        <div class="android-page">
            <div class="first-line">
                <span>Please Select Test Moudle</span>
            </div>
            <div class="second-line">
                <button class="button">Camera</button>
            </div>
            <div class="third-line">
                <button class="button">Storage</button>
                <button class="button">CPU</button>
            </div>
        </div>
    </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb';
export default {
    name:"Android",
    data(){
        return {
            position: ["Main", "Android"]
        }
    },
    components:{
        Breadcrumb
    },
    methods:{
    },
}
</script>

<style scoped>
.android{
  height: 100%;
  width: 100%;
}
.android .Breadcrumb{
  height: 5%;
  width: 100%;
  border-bottom: 0.5px;
  box-sizing: border-box;
  border-bottom:solid;
  border-color: #8D8D8D;
     
}
.android .android-page{
  height: 95%;
  width: 100%;
     
}

.android .android-page .first-line {
    padding: 50px;
    font-size: 50px;
}

.android .android-page .second-line {
    padding: 60px 50px 60px 100px; 
    font-size: 30px;
    display: flex;
}

.android .android-page .second-line .button{
    height: 60px;
    width: 200px;
}

.android .android-page .third-line {
    padding: 60px 90px 60px 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.android .android-page .third-line .button{
    height: 60px;
    width: 200px;
}
</style>
